<script setup>
import { useVModel } from "@/utils/useVModel";

const props = defineProps({
	modelValue: {
		type: Object,
		required: true,
	},
	list: {
		type: Array,
	},
});
const emit = defineEmits(["update:modelValue"]);

const model = useVModel(props, "modelValue", emit);

const defaultProps = {
	children: "children",
	label: "name",
	value: "id",
};

const formRef = ref();
const instance = getCurrentInstance();
onMounted(() => {
	const entries = Object.entries(formRef.value.$.exposed);
	for (const [key, value] of entries) {
		instance.exposed[key] = value;
	}
});
defineExpose({ ...instance.exposed });
const rules = ref({
	code: [{ required: true, message: "请输入字典编码", trigger: "change" }],
	name: [{ required: true, message: "请输入字典名称", trigger: "change" }],
	pid: [{ required: true, message: "请选择所属字典", trigger: "change" }],
});
</script>

<template>
	<el-form :model="model" label-width="120px" :rules="rules" ref="formRef">
		<el-form-item label="字典名称" prop="name">
			<el-input v-model="model.name" />
		</el-form-item>
		<el-form-item label="字典编码" prop="code">
			<el-input v-model="model.code" />
		</el-form-item>
		<el-form-item label="所属字典" prop="pid">
			<el-tree-select
				v-model="model.pid"
				:data="list"
				:render-after-expand="false"
				:default-expand-all="true"
				:expand-on-click-node="false"
				:check-strictly="true"
				:props="defaultProps"
				style="width: 100%"
			/>
		</el-form-item>
		<el-form-item label="字典值" prop="value">
			<el-input v-model="model.value" />
		</el-form-item>
		<el-form-item label="备注" prop="note">
			<el-input v-model="model.note" />
		</el-form-item>
		<el-form-item label="排序" prop="sort">
			<el-input v-model="model.sort" />
		</el-form-item>
	</el-form>
</template>
